<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>广告管理弹窗</title>
	<link rel="stylesheet" type="text/css" href="{{asset('common/css/commonality.css')}}">
	<link rel="stylesheet" type="text/css" href="{{URL::asset('css/system/advertising.css')}}">
    <link rel="stylesheet" type="text/css" href="{{URL::asset('css/app.css')}}">
	<link rel="stylesheet" href="{{url('/common/css/element.css')}}">
    {{--<script src="//code.jquery.com/jquery.js"></script>--}}
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
	<style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
	<div class="pop_up_box">
		<div class="left_box">
			<div id="app" class="article">
				<el-upload
						class="avatar-uploader"
						action="http://{{$_SERVER['HTTP_HOST']}}/admin/upload"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				点击图片更改照片
			</div>
		</div>
		<div class="center_box">
			<form method="post" action="addAdv">
			{{csrf_field()}}
				<p>
					<label>优先级：&nbsp;&nbsp;&nbsp;<input type="text" name="order" placeholder="（1-20，数越大，优先级越低）" required></label>
				</p>
				<p>
					<label>广告名称：<input type="text" name="name" placeholder="请输入" required></label>
				</p>

				<p>
					<label>广告链接：
						<input type="text" name="jump_url" placeholder="请输入" required>
						<input type="hidden" name="img_url" class="img" required>
					</label>
				</p>
				<input type="submit" name="" value="提交" class="save btn_pop" style="width:140px;">
			</form>
            @include('flash::message')
		</div>
		<div class="right_box">
		</div>
	</div>
</body>
</html>
<script type="text/javascript" src="{{asset('/common/js/jquery.min.js')}}"></script>
<script src="{{asset('/common/js/validation/jquery.validate.min.js')}}"></script>
<script src="{{asset('/common/js/validation/localization/messages_zh.min.js')}}"></script>
{{--<script src="../../js/system/advertising.js"></script>--}}
<script src="{{url('/common/js/element/vue.js')}}"></script>
<script src="{{url('/common/js/element/element.js')}}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                imageUrl: ''
            };
        },
        methods: {
            handleAvatarSuccess(res, file) {
                $('.img').val(res.res.url)
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                //const isJPG = file.type === 'image/jpeg';
                //const isLt2M = file.size / 1024 / 1024 < 2;

                // if (!isJPG) {
                //     this.$message.error('上传头像图片只能是 JPG 格式!');
                // }
                // if (!isLt2M) {
                //     this.$message.error('上传头像图片大小不能超过 2MB!');
                // }
                // return isJPG && isLt2M;
            }
        }
    })
</script>


